<!doctype html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="504 Team">

    <link rel="icon" href="img/chess-piece-icon.png" type="image/x-icon">
    <title>对局 · 五子棋</title>

    <!-- Import Bootstrap v4.6.0 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Import custom style -->
    <link href="css/main.css" rel="stylesheet">
    <link href="css/general.css" rel="stylesheet">
  </head>
  <body>
    <!-- Nav Bar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
      <a class="navbar-brand" href="#">
        <img src="img/chess-piece-icon.png" width="30" height="30" class="d-inline-block align-top" alt="">
        五子棋
      </a>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto"></ul>
        <button class="btn btn-outline-success my-2 mx-2 my-sm-0" type="button" id="personal-information-btn">个人信息</button>
        <button class="btn btn-outline-danger my-2 mx-2 my-sm-0" type="button" id="logout-btn">退出登录</button>
      </div>
    </nav>
    <!-- The main framework -->
    <div class="container-fluid px-5">
      <div class="row px-5" id="main-framework">
        <!-- Left side: Players Information -->
        <div class="col-md-3 col-sm-12">
          <div class="container-fluid">
            <div class="container-fluid border rounded my-4 py-3 shadow-sm bg-light">
              <div class="row justify-content-center my-3">
                <img src="img/chess-piece.png" class="rounded my-3" alt="" width="80" height="80">
              </div>
              <div class="row justify-content-center">
                <p>昵称&nbsp;&nbsp;<span id="opponent-nick-msg">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></p>
              </div>
              <div class="row justify-content-center">
                <p>场数&nbsp;&nbsp;<span id="opponent-play-num-msg">请先准备</span></p>
              </div>
              <div class="row justify-content-center">
                <p>胜率&nbsp;&nbsp;<span id="opponent-win-rate-msg">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></p>
              </div>
            </div>
            <div class="container-fluid border rounded my-4 py-3 shadow-sm bg-light">
              <div class="row justify-content-center my-3">
                <img src="img/chess-piece.png" class="rounded my-3" alt="" width="80" height="80">
              </div>
              <div class="row justify-content-center">
                <p>昵称&nbsp;&nbsp;<span id="your-nick-msg">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></p>
              </div>
              <div class="row justify-content-center">
                <p>场数&nbsp;&nbsp;<span id="your-play-num-msg">请先登录</span></p>
              </div>
              <div class="row justify-content-center">
                <p>胜率&nbsp;&nbsp;<span id="your-win-rate-msg">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></p>
              </div>
            </div>
          </div>
        </div>
        <!-- Center side: Game Area -->
        <div class="col-md-6 col-sm-12">
          <!-- CheckerBoard -->
          <div class="container-fluid mt-5 mb-4 text-center">
            <canvas id="CheckerBoard" class="rounded shadow" width="500px" height="500px">
              你的浏览器不支持 Canvas，请升级你的浏览器。
            </canvas>
          </div>
          <!-- Operator -->
          <div class="container-fluid">
            <div class="row justify-content-center">
              <div class="btn-group btn-group-lg shadow" role="group" aria-label="Basic example">
                <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#ready" id="ready-btn" >准 备</button>
                <button type="button" class="btn btn-secondary" data-toggle="modal" id="regret-btn" disabled="disabled">悔 棋</button>
                <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#surrender" id="surrender-btn" disabled="disabled">认 输</button>
                <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#draw" id="draw-btn" disabled="disabled">求 和</button>
              </div>
            </div>
          </div>
        </div>
        <!-- Right side: Chat -->
        <div class="col-md-3 col-sm-12">
          <div class="container h-100">
            <div class="container-fluid border rounded mt-4 mb-5 pt-4 pb-2 shadow-sm bg-light">
              <div class="row justify-content-center">
                <p>对局信息</p>
              </div>
              <div class="row justify-content-center">
                <p id="chess-color-msg">请先准备</p>
              </div>
              <div class="row justify-content-center">
                <p id="rid-msg"></p>
              </div>
            </div>
            <!-- Chat Box -->
            <textarea class="form-control border rounded shadow-sm bg-light my-2 px-3 py-3" id="chatBox" rows="13" disabled></textarea>
            <div class="input-group mb-3 rounded shadow-sm">
              <input type="text" id="inputChatMsg" class="form-control" placeholder=" " onfocus="focusChatInput()">
              <div class="invalid-tooltip" id="chat-msg"></div>
              <div class="input-group-append">
                <button class="btn btn-primary" type="button" id="send-message-btn">发送</button>
              </div>
            </div>
          </div>
        </div>
      </div>
       <!-- Bottom Side: Copyright -->
       <div class="row my-2">
         <div class="col">
           <p class="text-center text-muted">
             504 Team &copy; 2021
           </p>
         </div>
       </div>
    </div>

  <!-- Ready -->
    <div class="modal fade" id="ready" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="ready" aria-hidden="true">
      <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">正在匹配…</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body m-auto">
            <div class="spinner-border text-secondary" role="status">
              <span class="sr-only">Loading...</span>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal" id="cancel-ready-btn">取消匹配</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Regret -->
    <div class="modal fade" id="regret" tabindex="-1" aria-labelledby="regret" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">悔棋</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>你确定要请求悔棋吗？</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">返回</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" id="regret-btn-confirm">确定</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Surrender -->
    <div class="modal fade" id="surrender" tabindex="-1" aria-labelledby="surrender" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">认输</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>你确定要向对方认输吗？</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">返回</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" id="surrender-btn-confirm">确定</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Draw -->
    <div class="modal fade" id="draw" tabindex="-1" aria-labelledby="draw" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">求和</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>你确定要向对方求和吗？</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">返回</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" id="draw-btn-confirm">确定</button>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="opponent-regret" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="opponent-draw" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">悔棋</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>对方请求悔棋，你要同意吗？</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal" id="reject-regret-btn">拒绝</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" id="agree-regret-btn">同意</button>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="opponent-draw" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="opponent-draw" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">求和</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>对方请求和棋，你要同意吗？</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal" id="reject-draw-btn">拒绝</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" id="agree-draw-btn">同意</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Check Login -->
    <div class="modal fade" id="check-login" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="check-login" aria-hidden="true">
      <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">请先登录</h5>
          </div>
          <div class="modal-body">
              <p>您还没有登录，请登录后再开始游戏</p>
          </div>
          <div class="modal-footer">
            <a class="btn btn-primary" href="login.html" role="button">立即登录</a>
          </div>
        </div>
      </div>
    </div>

    <!-- Playing leave -->
    <div class="modal fade" id="playing-leave" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="playing-leave" aria-hidden="true">
      <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="ready">您还在对局中</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
              <p>本场对局尚未结束，您确定要离开吗？</p>
              <p>离开将自动判负</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">继续游戏</button>
            <button type="button" class="btn btn-danger" data-dismiss="modal" id="leave-game-btn">立即离开</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Personal Information -->
    <div class="modal fade" id="personal-information" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="personal-information" aria-hidden="true">
      <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">修改个人信息</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="container-fluid">
              <div class="row justify-content-center">
                <div class="col-md-10">
                  <div class="form-signin">        
                    <div id="nick" class="form-label-group mx-3">
                      <input type="text" id="inputNick" class="form-control" placeholder=" " onfocus="focusInput()">
                      <label for="nick">昵称</label>
                      <div class="invalid-feedback" id="nick-msg"></div>
                    </div>
              
                    <div id="password1" class="form-label-group mx-3">
                      <input type="password" id="inputPassword1" class="form-control" placeholder=" " onfocus="focusInput()">
                      <label for="inputPassword1">密码</label>
                      <div class="invalid-feedback" id="password1-msg"></div>
                    </div>
                    
                    <div id="password2" class="form-label-group mx-3">
                      <input type="password" id="inputPassword2" class="form-control" placeholder=" " onfocus="focusInput()">
                      <label for="inputPassword2">再次输入密码</label>
                      <div class="invalid-feedback" id="password2-msg"></div>
                    </div>

                    <div id="signature" class="form-label-group mx-3">
                      <input type="text" id="inputSignature" class="form-control" placeholder=" " onfocus="focusInput()">
                      <label for="signature">个性签名</label>
                      <div class="invalid-feedback" id="signature-msg"></div>
                    </div>

                    <fieldset class="form-group mx-3">
                      <div class="col-sm-10" id="inputGender">
                        <div class="custom-control custom-radio custom-control-inline">
                          <input type="radio" id="inputMale" name="gender" class="custom-control-input" value="男">
                          <label class="custom-control-label" for="inputMale">男</label>
                        </div>
                        <div class="custom-control custom-radio custom-control-inline">
                          <input type="radio" id="inputFemale" name="gender" class="custom-control-input" value="女">
                          <label class="custom-control-label" for="inputFemale">女</label>
                        </div>
                        <div class="custom-control custom-radio custom-control-inline">
                          <input type="radio" id="inputSecret" name="gender" class="custom-control-input" value="保密">
                          <label class="custom-control-label" for="inputSecret">保密</label>
                        </div>
                      </div>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">返 回</button>
            <button type="button" class="btn btn-primary" id="save-information-btn">保 存</button>
          </div>
        </div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/sockjs-client/1.5.0/sockjs.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/stomp.js/2.3.3/stomp.js"></script>
    <script src="js/cookie.js"></script>
    <script src="js/util.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>
